<template>
    <div class="ele-body">
        <el-card shadow="never">
            <Search @search="reload" />
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection"
                :headerEllipsis="false" cache-key="appTable">
            </ele-pro-table>
        </el-card>
    </div>
</template>

<script>
import { pageUserLog, } from '@/api/log';
import Search from './components/search.vue';
import { formatDate } from "@/utils/formate";
export default {
    name: 'GatherTable',
    components: { Search },
    data() {
        return {
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 表格列配置
            columns: [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    fixed: 'left'
                },
                {
                    columnKey: 'index',
                    type: 'index',
                    label: '序号',
                    width: 50,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    prop: 'userId',
                    label: '用户ID',
                    align: 'center',
                    // width: 150
                },
                {
                    prop: 'before',
                    label: '之前金额',
                    align: 'center',
                    // width: 90,
                    showOverflowTooltip: true
                },
                {
                    prop: 'gold',
                    label: '花费金额',
                    align: 'center',
                    // width: 150,
                    showOverflowTooltip: true
                },
                {
                    prop: 'after',
                    label: '之后金额',
                    align: 'center',
                },

                {
                    prop: 'company',
                    label: '公司',
                    align: 'center',
                },
                {
                    prop: 'type',
                    label: '状态',
                    align: 'center',
                    formatter: (row) => {
                        switch (row.type) {
                            case 4:
                                return '登录'
                            case 5:
                                return '进入游戏'
                        }
                    }
                },
                {
                    prop: 'desc',
                    label: '备注',
                    align: 'center',
                },
                {
                    prop: 'createTime',
                    label: '创建时间',
                    // sortable: 'custom',
                    showOverflowTooltip: true,
                    minWidth: 110,
                    formatter: (row) => row.createTime ? formatDate(new Date(row.createTime)) : ''
                },
                // {
                //     columnKey: 'action',
                //     label: '操作',
                //     width: 120,
                //     align: 'center',
                //     resizable: false,
                //     slot: 'action',
                //     showOverflowTooltip: true
                // }
            ],
            // 表格选中数据
            selection: []
        };
    },
    methods: {
        /* 表格数据源 */
        datasource({ page, limit, where, order }) {
            if (!where.userId) {
                return Promise.resolve([]); // 如果没有 userId，返回空数组
            }
            return pageUserLog({ userId: where.userId, ...where, ...order, page, limit });
        },
        /* 刷新表格 */
        reload(where) {
            if (!where.userId) {
                this.$refs.table.data = []; // 手动设置表格数据为空数组
                return;
            }
            this.$refs.table.reload({ page: 1, where: where });
        },
    }
};
</script>